import "./App.css";
import React from "react";
import * as antd from "antd";
import { LiveEditor, LivePreview, LiveProvider, LiveError } from "./live/index";

function App() {
  const code = `
import { Button } from "antd";
import React from "react";

function Com(props) {
  return (
    <div>
      <Button type="primary">Button</Button>
      demo content 123
    </div>
  );
}

export default Com;
  `;

  const scope = {
    import: {
      react: React,
      antd: antd,
    },
  };

  function handleChange(event) {
    console.log(event.target.value);
  }

  return (
    <div className="App">
      <LiveProvider code={code} scope={scope} onChange={handleChange}>
        <LivePreview />
        <LiveEditor />
        <LiveError />
      </LiveProvider>
    </div>
  );
}

export default App;
